'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import { BuildingOfficeIcon, UserGroupIcon, ChartBarIcon, DocumentCheckIcon, CurrencyDollarIcon, ShieldCheckIcon } from '@heroicons/react/24/outline';

export default function TaxPage() {
  return (
    <div className="bg-white">
      {/* Banner Section */}
      <div className="relative h-[400px]">
        <Image
          src="/images/banner1.jpg"
          alt="税务筹划服务"
          fill
          style={{ objectFit: 'cover' }}
          priority
        />
        <div className="absolute inset-0 bg-black/50" />
        <div className="relative h-full flex items-center justify-center">
          <div className="text-center">
            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="text-4xl font-bold text-white mb-4"
            >
              税务筹划服务
            </motion.h1>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="text-xl text-gray-200"
            >
              5年行业经验 服务网点遍布全国
            </motion.p>
          </div>
        </div>
      </div>

      {/* Service Features */}
      <div className="max-w-7xl mx-auto px-4 py-16 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow"
          >
            <div className="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
              <BuildingOfficeIcon className="h-6 w-6" />
            </div>
            <h3 className="text-lg font-semibold mb-2">所得税筹划</h3>
            <p className="text-gray-600">通过我们的税收筹划，可以帮助您的企业的整体税负控制在一定范围内</p>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow"
          >
            <div className="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
              <UserGroupIcon className="h-6 w-6" />
            </div>
            <h3 className="text-lg font-semibold mb-2">个人所得税筹划</h3>
            <p className="text-gray-600">可以通过我们的节税定制方案，利用国家的相关优惠政策，来达到有效节税的目的</p>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
            className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow"
          >
            <div className="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
              <ChartBarIcon className="h-6 w-6" />
            </div>
            <h3 className="text-lg font-semibold mb-2">企业增值税筹划</h3>
            <p className="text-gray-600">采用合理合法的税务筹划来提高企业利润税收财政奖励，让企业实缴税适当的返还</p>
          </motion.div>
        </div>
      </div>

      {/* Service Content */}
      <div className="bg-gray-50 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900">企业税务筹划疑难问题</h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="bg-white p-6 rounded-lg shadow-md"
            >
              <h3 className="text-lg font-semibold mb-4">税负成本</h3>
              <p className="text-gray-600">利润虚高，税负成本攀升</p>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
              className="bg-white p-6 rounded-lg shadow-md"
            >
              <h3 className="text-lg font-semibold mb-4">税务风险</h3>
              <p className="text-gray-600">老板公私不分，公司积留大量税务风险</p>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
              className="bg-white p-6 rounded-lg shadow-md"
            >
              <h3 className="text-lg font-semibold mb-4">个税问题</h3>
              <p className="text-gray-600">高管和员工纳税意识不强，个税问题难解</p>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.6 }}
              className="bg-white p-6 rounded-lg shadow-md"
            >
              <h3 className="text-lg font-semibold mb-4">筹划水平</h3>
              <p className="text-gray-600">老板风险越来越大，财务部门筹划水平不足</p>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.8 }}
              className="bg-white p-6 rounded-lg shadow-md"
            >
              <h3 className="text-lg font-semibold mb-4">营改增税负</h3>
              <p className="text-gray-600">营改增后税负成本更高，赚钱越来越难</p>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 1.0 }}
              className="bg-white p-6 rounded-lg shadow-md"
            >
              <h3 className="text-lg font-semibold mb-4">金税三期</h3>
              <p className="text-gray-600">金税三期稽查越来越严，老办法根本行不通</p>
            </motion.div>
          </div>
        </div>
      </div>

      {/* Service Advantages */}
      <div className="max-w-7xl mx-auto px-4 py-16 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-900">税务筹划解决方案</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="bg-white p-6 rounded-lg shadow-lg"
          >
            <div className="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
              <DocumentCheckIcon className="h-6 w-6" />
            </div>
            <h3 className="text-lg font-semibold mb-2">所得税筹划</h3>
            <p className="text-gray-600">通过我们的税收筹划，可以帮助您的企业的整体税负控制在一定范围内</p>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="bg-white p-6 rounded-lg shadow-lg"
          >
            <div className="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
              <CurrencyDollarIcon className="h-6 w-6" />
            </div>
            <h3 className="text-lg font-semibold mb-2">个人所得税筹划</h3>
            <p className="text-gray-600">可以通过我们的节税定制方案，利用国家的相关优惠政策，来达到有效节税的目的</p>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
            className="bg-white p-6 rounded-lg shadow-lg"
          >
            <div className="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
              <ShieldCheckIcon className="h-6 w-6" />
            </div>
            <h3 className="text-lg font-semibold mb-2">企业增值税筹划</h3>
            <p className="text-gray-600">采用合理合法的税务筹划来提高企业利润税收财政奖励，让企业实缴税适当的返还</p>
          </motion.div>
        </div>
      </div>

      {/* Service Guarantee */}
      <div className="bg-primary py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center text-white">
            <h2 className="text-3xl font-bold mb-8">上万创业者选择了我们</h2>
            <p className="text-xl mb-12">我们已经为超10000家公司提供工商税务服务</p>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div>
                <div className="text-4xl font-bold mb-2">5</div>
                <p className="text-lg">年行业经验</p>
              </div>
              <div>
                <div className="text-4xl font-bold mb-2">1000+</div>
                <p className="text-lg">财务精英</p>
              </div>
              <div>
                <div className="text-4xl font-bold mb-2">10000+</div>
                <p className="text-lg">企业客户</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 